<!-- Font Awesome CSS -->
<link rel='stylesheet' href='/lib/bootstrap/css/font-awesome.min.css'>
<!---Bootstrap CSS-->
<link rel='stylesheet' href='/lib/bootstrap/css/bootstrap.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/bootstrap-theme.min.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/datepicker.css'>
<!-- App CSS -->
<link rel='stylesheet' href='/lib/bootstrap/css/mvpready-admin-belize.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/mvpready-flat.css'>

<!--BootStrap JavaScript-->
<script src='/lib/bootstrap/js/bootstrap.min.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/jquery.bootstrap.wizard.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootbox.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootstrap-datepicker.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootstrap-typeahead.js' type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#myTab a").click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
        $("#sortTab a").click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });

    });

</script>
<script src="/js/utility/FileSaver.min.js" type="text/javascript"></script>
<style>
    table td, table th {
        vertical-align: middle;
        height: 50px;
        text-align: center;
        font-size: 13px;
    }
</style>

<div>
    <!--<button style="margin-left: 20px;" class="btn-secondary btn-sm" ng-click="printOut()">ViewCacheStatus</button><br>-->

    <div class="" id="">
        <h3>Promotion Code Info</h3>

        <div class="form-group" style="margin-top: 20px;">
            <form>
                <label class="control-label">小区名称:</label>
                <select ng-options="m.objId as m.communityName for m in communityList" ng-model="comm"
                        ng-change="getPromoCodeStats(comm, start, end)">
                    <option value="">全部</option>
                </select><br/>

                <div class="col-xs-1">
                    <label class="control-label">开始时间:</label>
                    <input type="text" id="startDate" data-provide="datepicker"
                           class="form-control datepicker" data-date-format="yyyy-mm-dd"
                           placeholder="yyyy-MM-dd hh:mm:ss"
                           ng-model="start">
                </div>
                <div class="col-xs-1">
                    <label class="control-label">结束时间:</label>
                    <input type="text" id="endDate" data-provide="datepicker"
                           class="form-control datepicker" data-date-format="yyyy-mm-dd"
                           placeholder="yyyy-MM-dd hh:mm:ss"
                           ng-model="end">
                </div>
                <button id="submit" type="submit" class="btn btn-primary"
                        ng-click="getPromoCodeStats(comm, start, end)">搜索
                </button>
            </form>
        </div>
        <div><span id="loadingText" style="color:red; text-align: center"></span></div>
        <button ng-click="exportPromoCodeData()">Export</button>

        <div id="exportable">
            <table class="table table-condensed">
                <thead>
                <tr>
                    <th rowspan="2">小区</th>
                    <th rowspan="2">User Creation Date</th>
                    <th colspan="2">No Promotion, No Invites</th>
                    <th colspan="2">No Promotion, Invites</th>
                    <th colspan="2">Promotion, No Invites</th>
                    <th colspan="2">Promotion, Invites</th>
                    <th rowspan="2">Total</th>
                </tr>
                <tr>
                    <th>V用户</th>
                    <th>非V用户</th>
                    <th>V用户</th>
                    <th>非V用户</th>
                    <th>V用户</th>
                    <th>非V用户</th>
                    <th>V用户</th>
                    <th>非V用户</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="(date, stat) in statsDisplay">
                    <td>{{communityName}}</td>
                    <td>{{date}}</td>
                    <td>{{stat.npniV}}</td>
                    <td>{{stat.npniNV}}</td>
                    <td>{{stat.npiV}}</td>
                    <td>{{stat.npiNV}}</td>
                    <td>{{stat.pniV}}</td>
                    <td>{{stat.pniNV}}</td>
                    <td>{{stat.piV}}</td>
                    <td>{{stat.piNV}}</td>
                    <td style="font-weight: bold;">{{stat.total}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>